Documentation by “on3-step"

---

“HTML5 INTRO”

---

Table of Contents

1. HTML Structure
2. CSS Files
3. Jquery

---

A) HTML structure - top

This file using Bootstrap, All the information within main content is nested within a div with id- name "main-intro" for the file. If you need more information you can read Bootstrap documentation on this link

 

1. Sample html structure page

  <!-- frame1 -->
  <section id="frame1" data-frame="8000"  aria-label="frame1">
  <!-- background -->
  <div class="bgintro animfadeIn" data-time="0"><img alt="background" src="img/imgintro1.jpg"></div>
  <!-- background end -->
   <div class="overlayintro"></div>
   <!-- container -->
   <div class="container-fluid">
    <div class="row v-align"><!-- row -->
        <div class="contentintro"><!-- content -->
           <div class="col-md-1"></div>
           <div class="col-md-4 right">
              <div class="p-30px animfadeInDown" data-time="1200"><img alt="image" class="img-responsive" src="img/tal-1.png"></div>
              <div class="devider-left animfadeInLeft" data-time="1500"></div>
           </div>
           <div class="col-md-6 left p-50px">
              <div class="devider-right animfadeInRight" data-time="1800" ></div>
              <h1 class="animbounceInLeft" data-time="600"><span class="gray">AWESOME</span> YOUR LIFE</h1>
              <h3 class="animbounceInRight" data-time="900">the world of adventure challenge</h3>
           </div>
           <div class="col-md-1"></div>
        </div><!-- content end -->
    </div><!-- row end -->
   </div>
   <!-- container end -->
  </section>
  <!-- end frame1 -->

For add more frame page, copy and paste div tag id="frame1" and rename it to div tag id="frame2", next-step open styleintro.css add more frame also there, final step open intro.js file and go to line5 code var pagenum = number; change the number of frame will use on your file. (example id="frame2" var pagenum =2;)

 

For change animation all element tag, call class animation there (all animation classname, will start with the name "anim")

 

for add delay of time example below:

 

data-frame="8000" this data for delay of frame ( 8 second before change for next frame)

data-time="1800" this data for delay of all element tag inside of frame ( 1.8 second before the animation start)

---

B) CSS Files - top

These are css files used in this file:

1. bootstrap.min.css - css by Twitter boostrap
2. animatedintro.css - used for element animation all of page
3. styleintro.css - main css files (you can edit color, font, etc from this css)
4. queriesintro.css - used for responsive style

You can change almost all styles from styleintro.css file.

/* CSS Document */

	reset
	preloader
	container
	sound
	frame-page
	wraper
	general
	space
	devider
	padding
	margin
	color
	logo
	overlay background 

*/

---

C) Jquery - top

open intro.js file change your number of frame there

 var pagenum = 4; //change your frame of intro

 // ridirect landing page
 function directpage() {
     return window.location.href = 'http://on3-step.com/demolink/tf/expedition-v1/expedition-v2/index.html'; 
     //change with your url
 }
 

on3-step

Go To Table of Contents

---